<template>
	<div class="admin-job">
		<div class="task-search">
			<div class="task-search_martio">
				<div class="task-search_text">策略中心</div>
				<div class="task-search_top">
					<div class="task-search_box">
						<i class="el-icon-search"></i>
						<el-input placeholder="请输入名称、简介、Id" v-model="searchValue" @input="search"></el-input>
					</div>
					<div class="task-search_but" @click="search">搜索</div>
				</div>
			</div>
			<div class="task-search_tab">
				<ul class="tab_ul">
					<li class="tab_ul-li" v-for="(tItem,tIndex) in tabList" :key="tIndex" @click="tabClck(tItem),tabIndex=tIndex">
						<div class="li-text" :class="{'li-text-active':tIndex==tabIndex}">{{tItem.name}}</div>
						<div class="li-tline" :class="{'li-tline-active':tIndex==tabIndex}"></div>
					</li>
				</ul>
				<div class="tab_line"></div>
			</div>
		</div>
		<div v-loading="isLoading">
			<ul class="admin-job_ul" v-if="viemodel.length!=0">
				<li class="admin-job_li" v-for="(item,index) in viemodel" :key="index">
					<div class="admin-job_box">
						<div class="admin-job_right">
							<i :class="`${item.icon}`"></i>
						</div>
						<div class="admin-job_left">
							<div class="admin-job_t1">{{item.name}}</div>
							<div class="admin-job_p1">
								<div class="admin-job_t2" v-if="item.isEnable">已启动</div>
								<div class="admin-job_t2 admin-job_t3" v-else>未启动</div>
								<div class="admin-job_t4">{{item.intervalIntro}} <span v-if="item.lastExecute">上次:{{item.lastExecute}}</span> </div>
							</div>
							<div class="admin-job_p2">{{item.intro}}</div>
							<div class="admin-job_p4">
								<div class="p4-buts" @click="editTab(item)" title="编辑"><i class="el-icon-edit-outline"></i>编辑</div>
								<div class="p4-buts" @click="$router.push('/Admin/TaskPlanRecord/List?TaskId='+item.taskId)" title="记录"><i class="el-icon-tickets"></i>记录</div>
								<div class="p4-buts" @click="execute(item)" title="执行"><i class="el-icon-thumb"></i>执行</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<zk-nodata v-else></zk-nodata>
		</div>
	</div>
</template>
<script>
	import iconJson from './icon.json'
	export default {
		data() {
			return {
				iconArray: iconJson,
				searchValue: '',
				viemodel: '',
				searModel: '',
				widgetValue: [],
				isLoading: true,
				tabList: [{
					name: '全部',
					type: ''
				}, {
					name: '已启用',
					type: true
				}, {
					name: '未启用',
					type: false
				}],
				tabIndex: 0,
				grabbleModel: null
			}
		},
		props: {
			widget: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var repones = await this.$ala.httpGet('api/taskplan/modules')
				var taskPlansList = this.jsonAnalysis(repones.taskPlans, 'interval')
				if (this.widget.value) {
					if (this.widget.value.ids) {
						this.widgetValue = this.widget.value.ids
					} else {
						this.widgetValue = []
					}
				}
				this.searModel = taskPlansList
				var this_ = this
				this.searModel.forEach((sea, index) => {
					sea.icon = this_.iconArray[index + 10]
				})
				this.viemodel = this.arrayWeight(this.searModel, this.widgetValue)
				this.grabbleModel = this.arrayWeight(this.searModel, this.widgetValue)
				this.isLoading = false
			},
			async execute(val) {
				var this_ = this
				this.$confirm('是否要执行该操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var rexecute = await this_.$ala.httpGet('api/TaskPlan/Execute', {
						id: val.id
					})
					if (rexecute.status === 1) {
						this_.$message({
							message: '执行成功！',
							type: 'success'
						})
					} else {
						this_.$message.error('执行失败！')
					}
				})
			},
			editTab(val) {
				this.$router.push('/admin/job/edit?id=' + val.id)
			},
			tabClck(tabVal) {
				this.tabIndex = 0
				var tab = []
				var arrList = this.arrayWeight(this.searModel, this.widgetValue)
				if (tabVal.type !== '') {
					arrList.forEach((res) => {
						if (res.isEnable === tabVal.type) {
							tab.push(res)
						}
					})
				} else {
					tab = arrList
				}
				this.viemodel = tab
			},
			search() {
				var arr = []
				if (this.searchValue) {
					this.grabbleModel.forEach((res) => {
						if (res.name.indexOf(this.searchValue) > -1 || res.taskId.indexOf(this.searchValue) > -1 || res.intro.indexOf(this.searchValue) > -1) {
							arr.push(res)
						}
					})
				} else {
					arr = this.arrayWeight(this.searModel, this.widgetValue)
				}
				this.viemodel = arr
			},
			jsonAnalysis(val, type) {
				val.forEach((res) => {
					res[type] = JSON.parse(res[type])
				})
				return val
			},
			arrayWeight(val, data) {
				var arr = val.filter(item => {
					var arr1 = data.map(v => v)
					return !arr1.includes(item.id)
				})
				return arr
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>